<template>
  <div class="map-container" id="mapDiv"></div>
</template>
<script setup>
import Map from 'ol/Map'
import View from 'ol/View'
import TileWMS from 'ol/source/TileWMS.js'
import TileLayer from 'ol/layer/Tile.js'
import {defaults as DefaultControl} from 'ol/control'

defineOptions({
  name: 'dashboard'
})
let myMap
onMounted(() => {
  initMap()
})
// http://192.168.0.42:8080/geoserver/guangdong/wms?service=WMS&version=1.1.0&request=GetMap&layers=guangdong%3Aguangdong_t1&bbox=-180.0%2C-90.0%2C180.0%2C90.0&width=768&height=384&srs=EPSG%3A4326&styles=&format=application/openlayers
const initMap = () => {
  const geoserverLayer = new TileLayer({
    source: new TileWMS({
      url: 'http://192.168.0.42:8080/geoserver/shenzhen/wms', // 请求地址
      params: { // 请求的参数设置，其余参数可以不设置，使用默认的参数
        LAYERS: 'shenzhen:sz_22' // 请求的图层名
        // VERSION: '1.1.0' // wms请求的版本，也可用1.3.0
      }
    })
  })
  myMap = new Map({
    controls: new DefaultControl({ // 地图控件
      zoom: true, // 清除放大缩小控件
      rotate: false // 清除旋转地图控件
    }),
    target: 'mapDiv',
    layers: [geoserverLayer],
    view: new View({
      constrainResolution: true,// 因为存在非整数的缩放级别，所以设置该参数为true来让每次缩放结束后自动缩放到距离最近的一个整数级别，这个必须要设置，当缩放在非整数级别时地图会糊
      center: [114.0578813601, 22.5474457937], // 地图初始化后的中心点
      maxZoom: 22, // 地图缩放最大级别
      minZoom: 6,
      projection: 'EPSG:4326', // 默认是EPSG:3857
      // extent: [107.98793507103751, 18.542929192137503, 120.11684132103751, 26.529989739012503],
      // extent: transform([107.98793507103751, 18.542929192137503, 120.11684132103751, 26.529989739012503], 'EPSG:3857', 'EPSG:4326'),
      zoom: 7
    })
  })
  myMap.on('click', function (e) {
    console.log(e.coordinate)
  })
}

</script>
<style>
.zoom-tips {
  padding: 2px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  background: #fff;
  border-radius: 2px;
  color: #000;
}
</style>
<style scoped lang="scss">
.map-container {
  width: 100%;
  height: 100%;
  position: relative;
  border: 1px solid #135f9e;
}
</style>
